<template>
  <div class="clubPage">
    <div class="searchBox bgfff">
      <div class="tabsBox">
        <el-tabs v-model="type" @tab-click="handleClick">
          <el-tab-pane label="达人活动审核" name="1"></el-tab-pane>
          <el-tab-pane label="达人申请审核" name="2"></el-tab-pane>
        </el-tabs>
      </div>

      <el-form
        v-if="type == 1"
        :inline="true"
        :model="form1"
        ref="formRef1"
        class="demo-form-inline"
        size="small"
        label-width="90px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名：" prop="user_name">
              <el-input
                v-model="form1.user_name"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号：" prop="phone">
              <el-input v-model="form1.phone" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="活动标题" prop="name">
              <el-input v-model="form1.name" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="专业技能：" prop="skill">
              <el-select v-model="form1.skill" placeholder="请选择">
                <el-option label="全部" value="0"> </el-option>
                <el-option label="不限" value="3"> </el-option>
                <el-option label="男" value="1"> </el-option>
                <el-option label="女" value="2"> </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="8">
            <el-form-item label="审核状态：" prop="review_status">
              <el-select v-model="form1.review_status" placeholder="请选择">
                <el-option label="全部" value="0"> </el-option>
                <el-option label="未审核" value="1"> </el-option>
                <el-option label="审核通过" value="2"> </el-option>
                <el-option label="审核未通过" value="3"> </el-option>
                <el-option label="取消" value="4"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <div class="time">
              <el-form-item label="申请时间：" prop="create_date">
                <el-date-picker
                  v-model="form1.create_date"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="~"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="3" style="display: flex; justify-content: flex-end">
            <el-form-item style="margin-right: 0">
              <el-button type="primary" size="small" @click="onSubmit(1)"
                >查询</el-button
              >
              <el-button @click="resetForm('formRef1')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form
        v-else
        :inline="true"
        :model="form2"
        ref="formRef2"
        class="demo-form-inline"
        size="small"
        label-width="90px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名：" prop="user_name">
              <el-input
                v-model="form2.user_name"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号：" prop="phone">
              <el-input v-model="form2.phone" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="所属小区：" prop="skill">
              <el-select v-model="form.skill" placeholder="请选择">
                <el-option label="全部" value="0"> </el-option>
                <el-option label="不限" value="3"> </el-option>
                <el-option label="男" value="1"> </el-option>
                <el-option label="女" value="2"> </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="8">
            <el-form-item label="申请技能：" prop="type_name">
              <el-input
                v-model="form2.type_name"
                placeholder="请输入"
              ></el-input>
              <!-- <el-select v-model="form2.type" placeholder="请选择">
                <el-option label="全部" value="0"> </el-option>
                <el-option label="非物质文化传承人" value="1"> </el-option>
                <el-option label="唱歌达人" value="2"> </el-option>
                <el-option label="跑步达人" value="3"> </el-option>
                <el-option label="手工艺人" value="4"> </el-option>
                <el-option label="教师" value="5"> </el-option>
                <el-option label="心理咨询师" value="6"> </el-option>
                <el-option label="游泳教练" value="7"> </el-option>
                <el-option label="篮球教练" value="8"> </el-option>
                <el-option label="绘画达人" value="9"> </el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="审核状态：" prop="status">
              <el-select v-model="form2.status" placeholder="请选择">
                <el-option label="全部" value="0"> </el-option>
                <el-option label="未审核" value="1"> </el-option>
                <el-option label="已通过" value="2"> </el-option>
                <el-option label="不通过" value="3"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3" style="display: flex; justify-content: flex-end">
            <el-form-item style="margin-right: 0">
              <el-button type="primary" size="small" @click="onSubmit(2)"
                >查询</el-button
              >
              <el-button @click="resetForm('formRef2')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="tablesCard bgfff">
      <el-table
        v-show="type == 1"
        :data="tableData"
        border
        size="small"
        style="width: 100%"
      >
        <!-- height="580" -->
        <el-table-column
          prop="create_time"
          label="申请时间"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column prop="originator" label="达人姓名" align="center">
          <!-- <template slot-scope="scope">
            {{ scope.row.TalentUser[0]?.usre_name }}
          </template> -->
        </el-table-column>
        <el-table-column prop="originator_tel" label="手机号" align="center" />

        <!-- <el-table-column prop="TalentUser" label="专业技能" align="center">
          <template slot-scope="scope">
            {{ scope.row?.TalentUser[0]?.talent_names }}
          </template>
        </el-table-column> -->
        <el-table-column prop="name" label="活动标题" align="center" />
        <el-table-column
          prop="person_num_limit"
          label="活动人数上限"
          align="center"
        />
        <el-table-column
          prop="begin_time"
          label="活动开始时间"
          align="center"
        />
        <el-table-column prop="address" label="开课地址" align="center" />
        <el-table-column
          prop="review_status_text"
          label="审核状态"
          align="center"
        />

        <el-table-column prop="" label="操作" align="center" width="150">
          <template slot-scope="scope">
            <div class="operateBtns">
              <el-link type="primary" @click="onBtns(1, scope.row)"
                >查看</el-link
              >
              <el-divider direction="vertical"></el-divider>

              <el-link
                type="primary"
                :disabled="scope.row.review_status != 1"
                @click="onBtns(2, scope.row)"
                >审核</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        v-show="type == 2"
        :data="tableData"
        border
        size="small"
        style="width: 100%"
      >
        <!-- height="580" -->
        <el-table-column
          prop="type_name"
          label="申请技能"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column prop="user_name" label="申请人姓名" align="center" />
        <!-- <el-table-column prop="user_name" label="用户昵称" align="center" /> -->
        <el-table-column prop="phone" label="手机号" align="center" />
        <!-- <el-table-column prop="village" label="所在小区" align="center" /> -->
        <!-- <el-table-column prop="room" label="房屋" align="center" /> -->

        <el-table-column prop="status_text" label="审核状态" align="center" />
        <el-table-column prop="create_time" label="申请时间" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div class="">
              <el-link type="primary" @click="onBtns(3, scope.row)"
                >查看</el-link
              >
              <el-divider direction="vertical"></el-divider>
              <el-link
                :disabled="scope.row.status != 1"
                type="primary"
                @click="onBtns(4, scope.row)"
                >审核</el-link
              >
              <el-divider direction="vertical"></el-divider>
              <el-popover
                :ref="`popover-${scope.row.id}`"
                popper-class="myPopover"
                placement="left"
                width="160"
                trigger="click"
              >
                <p class="text">
                  <i class="el-icon el-icon-warning"></i>
                  是否确认删除？
                </p>
                <div class="btnBox">
                  <el-button
                    size="mini"
                    @click="$refs[`popover-${scope.row.id}`].doClose()"
                    >取消</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="onBtns(5, scope.row)"
                    >确定</el-button
                  >
                </div>
                <el-link type="danger" slot="reference">删除</el-link>
              </el-popover>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageBlock">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total.sync="total"
          :current-page.sync="page"
          :page-size.sync="limit"
          @size-change="sizeChange"
          @current-change="currentChange"
        >
        </el-pagination>
      </div>
    </div>
    <activeDetail
      v-if="activeDetailShow"
      @handleClose="activeDetailShow = false"
      :dialogVisible="activeDetailShow"
      :id="talentInfo.id"
    ></activeDetail>
    <auditBox
      v-if="auditBoxShow"
      @handleClose="handleClose"
      :dialogVisible="auditBoxShow"
      :id="talentInfo.id"
      :flag="flag"
    ></auditBox>
    <applyTalentDeatil
      v-if="applyTalentDeatilShow"
      @handleClose="applyTalentDeatilShow = false"
      :DeatilId="applyTalentDeatilId"
      :dialogVisible="applyTalentDeatilShow"
    ></applyTalentDeatil>
  </div>
</template>

<script>
import {
  talentReviewList,
  delTalentReview,
  talentActivityList,
} from "@/api/talent.js";

import activeDetail from "@/views/activity/common/activeDetail.vue";

import auditBox from "./common/auditBox.vue";
import applyTalentDeatil from "./common/applyTalentDeatil.vue";
export default {
  name: "",
  props: [""],

  data() {
    return {
      type: "1",
      form1: {
        user_name: "",
        phone: "",
        review_status: "",
        create_date: [],
        name: "",
      },
      form2: {
        user_name: "",
        phone: "",
        type: "",
        type_name: "",
        status: "",
        page: "1",
        limit: "10",
      },
      tableData: [{}],
      total: 0,
      page: 1,
      limit: 10,
      projectId: "",
      checkShow: false,
      radio: 1,
      activeDetailShow: false,
      auditBoxShow: false,
      applyTalentDeatilShow: false,
      applyTalentDeatilId: "",
      talentInfo: {},
      flag: "",
    };
  },

  components: { activeDetail, auditBox, applyTalentDeatil },

  computed: {},

  beforeMount() {},

  mounted() {
    this.getList();
    // this.getList2();
  },

  methods: {
    onSubmit(v) {
      if (v == 1) {
        this.getList();
      } else {
        this.getList2();
      }
    },
    resetForm(formName) {
      if (formName == "formRef1") {
        this.$refs[formName].resetFields();
        this.getList();
      }
      if (formName == "formRef2") {
        this.$refs[formName].resetFields();
        this.getList2();
      }
      // console.log(formName, "formName");
      // this.getList();
    },
    getList() {
      talentActivityList({
        ...this.form1,
        create_date:
          this.form1.create_date == null
            ? ""
            : this.form1.create_date.join(" - "),
      }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.page.count;
        }
      });
    },
    getList2() {
      talentReviewList(this.form2).then((res) => {
        if (res.code == 200) {
          // console.log(res.data, ">>>dataList-----");
          this.tableData = res.data.list;
          this.total = res.data.page.count;
        }
      });
    },
    onBtns(val, info) {
      console.log(val, info, "val--info--8888888***");
      this.talentInfo = info;
      this.flag = val;
      if (val == 1) {
        //达人活动审核-查看
        this.activeDetailShow = true;
      } else if (val == 2) {
        //达人活动审核-审核
        this.auditBoxShow = true;
      } else if (val == 3) {
        //达人申请审核-查看
        this.applyTalentDeatilId = info.id;
        this.applyTalentDeatilShow = true;
      } else if (val == 4) {
        //达人申请审核-审核
        this.auditBoxShow = true;
      } else if (val == 5) {
        //达人申请审核-删除
        delTalentReview({ id: info.id }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功",
            });
            this.$refs[`popover-${info.id}`].doClose();
            this.getList2();
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        });
      } else {
        console.log("]]][[[]]]");
      }
    },
    // closeAuditbox(val) {
    //   console.log(val, "0000000------8888888******");

    //   if (val) {
    //     this.getList2();
    //   }

    //   this.auditBoxShow = false;
    // },
    handleClick(tab, event) {
      console.log(this.type, ".>>>>>>type");
      if (tab.index == 0) {
        this.getList();
      } else {
        this.getList2();
      }
      // console.log(tab.index, event, "tabtabtabtabtabchange---");

      // this.getList2();
    },
    sizeChange(e) {
      if (this.type == 1) {
        this.form1.limit = e;
        this.getList();
      } else {
        this.form2.limit = e;
        this.getList2();
      }
      // console.log(e, "sizeChange");
      // console.log(this.limit, "limit》》》》》currentChange");
    },
    currentChange(e) {
      if (this.type == 1) {
        this.form1.page = e;
        this.getList();
      } else {
        this.form2.page = e;
        this.getList2();
      }
      // console.log(e, "currentChange");
      // console.log(this.page, "page》》》》》sizeChange");
    },
    handleClose(val) {
      this.auditBoxShow = false;
      console.log(val, ">>>>ValvaVA>VAva");
      if (val == 1) {
        this.getList();
      } else {
        this.getList2();
      }
    },
  },

  watch: {
    auditBoxShow: {
      handler(newv, oldv) {
        this.$nextTick(() => {
          this.auditBoxShow = newv;
        });
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.clubPage {
  .searchBox {
    margin-bottom: 14px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    height: 200px;
    .tabsBox {
      margin: 10px 0 20px;
      .el-tabs {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .el-tabs__nav-wrap::after {
          background-color: rgba(0, 0, 0, 0);
        }
      }
    }
    /deep/.el-form-item {
      margin-bottom: 0;
      .el-input__inner {
        width: 300px;
      }
    }
    .time {
      .el-input__inner {
        width: 360px;
      }
    }
  }
  .tablesCard {
  }
  .checkdialogBody {
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      margin-bottom: 2px;
      margin-right: 10px;
    }
  }
}
</style>
